blob: 293a7ba5db435afbd56602df0dc6a41ee77bae68 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<script lang="ts">
import { userIdentity } from '$lib/AniList/identity.js';
import type { Badge } from '$lib/userBadgesDatabase.js';
import { onMount } from 'svelte';
export let data;
let editMode = false;
let currentUserIdentity: ReturnType<typeof userIdentity>;
onMount(async () => {
if (data.user) {
currentUserIdentity = userIdentity(data.user);
} else {
currentUserIdentity = new Promise((resolve) =>
resolve({
name: 'Guest',
id: -1
})
);
}
});
const submitBadge = () => {
const imageURL = document.querySelector('input[name="image_url"]') as HTMLInputElement;
const activityURL = document.querySelector('input[name="activity_url"]') as HTMLInputElement;
const description = document.querySelector('input[name="description"]') as HTMLInputElement;
fetch(`/api/badges/add`, {
method: 'POST',
body: JSON.stringify([
{ image: imageURL.value, post: activityURL.value, description: description.value }
])
});
console.log(imageURL.value, activityURL.value, description.value);
imageURL.value = '';
activityURL.value = '';
description.value = '';
};
const removeBadge = (badge: Badge) => {
fetch(`/api/badges/remove?id=${badge.id}`, {
method: 'POST'
});
(document.querySelector(`#badge-${badge.id}`) as HTMLAnchorElement).style.display = 'none';
};
</script>
{#await currentUserIdentity}
Loading ...
{:then identity}
{@const isOwner = identity && identity.name === data.username}
<p>
<a href={`/user/${data.username}`}>Back to Profile</a>
{#if isOwner}
•
<a href={`#`} on:click={() => (editMode = !editMode)}
>{editMode ? 'Disable' : 'Enable'} Edit Mode</a
>
{/if}
</p>
{#if editMode && isOwner}
<p>
Delete mode is enabled. Click on an image to delete it. There is no confirmation, so be
careful!
</p>
<p>
<input type="text" placeholder="Image URL" name="image_url" minlength="1" maxlength="1000" />
<input
type="text"
placeholder="Activity URL"
name="activity_url"
minlength="1"
maxlength="1000"
/>
<input
type="text"
placeholder="Description (Optional)"
name="description"
minlength="1"
maxlength="1000"
/>
<a href={`#`} on:click={submitBadge}>Add Badge</a>
</p>
{/if}
<div id="badges">
{#each data.badges as badge}
{#if editMode}
<a href={`#`} on:click={() => removeBadge(badge)} id={`badge-${badge.id}`}>
<img src={badge.image} alt={badge.description} />
</a>
{:else}
<a href={badge.post} target="_blank" id={`badge-${badge.id}`}>
<img src={badge.image} alt={badge.description} />
</a>
{/if}
{/each}
</div>
{/await}
<style>
/* body {
margin: 0;
padding: 0;
text-align: center;
background-color: #151f2e;
} */
img {
width: 100%;
height: auto;
}
#badges {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
grid-gap: 0;
}
</style>
|